<template lang="pug">
div.padding-box-100
  - let n = 20
    h1 未使用 animation-timing-function: steps(20, start);
    div.pug-box
      while n > 0
        - n--
        div.box
    - n = 20
    h1 使用 animation-timing-function: steps(20, start);
    div.pug-box.pug-box-step
      while n > 0
        - n--
        div.box
</template>

<style scoped lang="scss">
@use "sass:math";

$width: 24px;
.pug-box {
  margin: 100px 0 300px 200px;
  position: relative;
  width: $width;
  height: $width;

  animation-name: run;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;

  .box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2f6f44;
    border-radius: math.div($width, 2);
  }

  $i: 20;
  @while $i > 0 {
    .box:nth-child(#{$i}) {
      transform: rotate($i * 18deg) translate(0, 120px) scale(math.div($i, 20));
      filter: hue-rotate($i * 18deg);
    }
    $i: $i - 1;
  }

  .pug-box {

  }

}

.pug-box-step {
  animation-timing-function: steps(20, start);
}

@keyframes run {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
